<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="body">
      <div class="project">
        <el-form
          :model="basicForm"
          label-position="top"
          :rules="basicRules"
          ref="basicFormRef"
        >
          <!-- 基本信息 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              基本信息
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="子产业"
                    prop="middleType"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.middleType"
                      :allow-create="true"
                      :filterable="true"
                      :disabled="isDetail"
                      @change="handleChangeMiddleType"
                    >
                      <el-option
                        v-for="item in middleTypeOptions"
                        :key="item.text"
                        :label="item.text"
                        :value="item.text"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="子产业细分"
                    prop="bottomType"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.bottomType"
                      :disabled="isDetail"
                      :allow-create="true"
                      :filterable="true"
                    >
                      <el-option
                        v-for="item in bottomTypeOptions"
                        :key="item.text"
                        :label="item.text"
                        :value="item.text"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 各阶段项目数及投资额 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              各阶段项目数及投资额
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="项目总数"
                    prop="projectCount"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.projectCount"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="项目总投资"
                    prop="projectAmountCount"
                  >
                    <el-input
                      v-model="basicForm.projectAmountCount"
                      :disabled="isDetail"
                      ><template slot="append"
                        >亿元</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="已签约项目数"
                    prop="signProjectCount"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.signProjectCount"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="已签约项目投资"
                    prop="signProjectAmountCount"
                  >
                    <el-input
                      v-model="
                        basicForm.signProjectAmountCount
                      "
                      :disabled="isDetail"
                      ><template slot="append"
                        >亿元</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="重点在谈项目数"
                    prop="importantProjectCount"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="
                        basicForm.importantProjectCount
                      "
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="重点在谈项目投资"
                    prop="importantProjectAmountCount"
                  >
                    <el-input
                      v-model="
                        basicForm.importantProjectAmountCount
                      "
                      :disabled="isDetail"
                      ><template slot="append"
                        >亿元</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 各能级项目数 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              各能级项目数
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="世界500强"
                    prop="worldTop"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.worldTop"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="中国企业500强"
                    prop="chineseTop"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.chineseTop"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="中国上市公司百强榜"
                    prop="chinesePublicTop"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.chinesePublicTop"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="中国民营企业500强"
                    prop="chinesePrivateTop"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.chinesePrivateTop"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="行业龙头企业"
                    prop="industryTop"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.industryTop"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="行业知名企业"
                    prop="industryPopular"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.industryPopular"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="省级企业技术中心"
                    prop="provinceTechnology"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.provinceTechnology"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="专精特新企业"
                    prop="masteryNewCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.masteryNewCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="高新技术企业"
                    prop="highNewCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.highNewCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="科技型中小企业"
                    prop="scienceSmallCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="
                        basicForm.scienceSmallCompany
                      "
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="双软企业"
                    prop="softCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.softCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="纳入“四川省上市后备企业资源库入库企业”"
                    prop="specialCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.specialCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="瞪羚企业"
                    prop="gazelleCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.gazelleCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="牛羚企业"
                    prop="gnuCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.gnuCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="独角兽企业"
                    prop="unicomCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.unicomCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="雏鹰企业"
                    prop="eagleCompany"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.eagleCompany"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家级科技企业孵化器"
                    prop="nationalHatch"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.nationalHatch"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家级制造业单项冠军产品企业"
                    prop="nationalChampionProduct"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="
                        basicForm.nationalChampionProduct
                      "
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家级制造业单项冠军培育企业"
                    prop="nationalChampionBreed"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="
                        basicForm.nationalChampionBreed
                      "
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家级制造业单项冠军示范企业"
                    prop="nationalChampionLead"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="
                        basicForm.nationalChampionLead
                      "
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家级技术创新示范企业"
                    prop="nationalInnovationLead"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="
                        basicForm.nationalInnovationLead
                      "
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家级专精特新“小巨人”企业"
                    prop="nationalHuge"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.nationalHuge"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家企业技术中心"
                    prop="nationalTechnology"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="basicForm.nationalTechnology"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="国家众创空间"
                    prop="nationalPublicInnovation"
                    :rules="basicRules.inter"
                  >
                    <el-input
                      v-model="
                        basicForm.nationalPublicInnovation
                      "
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="line" v-show="!isDetail">
      <el-button @click="saveInfo" class="save-btn"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import {
  addProjectInfo,
  queryProjectDetail,
  queryProjectType,
  querySearchType
} from '@/api/IndustryInfoManagement'

export default {
  props: {
    pkid: String,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Breadcrumb
  },
  data() {
    return {
      basicForm: {
        pkid: '',
        topType: '4',
        middleType: '',
        bottomType: '',
        projectCount: '',
        projectAmountCount: '',
        signProjectCount: '',
        signProjectAmountCount: '',
        importantProjectCount: '',
        importantProjectAmountCount: '',
        worldTop: '',
        chineseTop: '',
        chinesePublicTop: '',
        chinesePrivateTop: '',
        industryTop: '',
        industryPopular: '',
        provinceTechnology: '',
        masteryNewCompany: '',
        highNewCompany: '',
        scienceSmallCompany: '',
        softCompany: '',
        specialCompany: '',
        gazelleCompany: '',
        gnuCompany: '',
        unicomCompany: '',
        eagleCompany: '',
        nationalHatch: '',
        nationalChampionProduct: '',
        nationalChampionBreed: '',
        nationalChampionLead: '',
        nationalInnovationLead: '',
        nationalHuge: '',
        nationalTechnology: '',
        nationalPublicInnovation: ''
      },
      basicRules: {
        middleType: [
          {
            required: true,
            message: '请选择子产业',
            trigger: 'blur'
          }
        ],
        bottomType: [
          {
            required: false,
            message: '请选择子产业细分',
            trigger: 'blur'
          }
        ],
        projectAmountCount: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,6})?$/,
            message: '请输入最多六位小数的正数',
            trigger: 'blur'
          }
        ],
        signProjectAmountCount: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,6})?$/,
            message: '请输入最多六位小数的正数',
            trigger: 'blur'
          }
        ],
        importantProjectAmountCount: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,6})?$/,
            message: '请输入最多六位小数的正数',
            trigger: 'blur'
          }
        ],
        inter: [
          {
            pattern: /^[+]{0,1}(\d+)$/,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      middleTypeOptions: [],
      bottomTypeOptions: []
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  mounted() {
    this.getMiddleTypeOptions()
    if (this.isEdit) {
      this.getDetailInfo()
    }
  },
  watch: {},
  methods: {
    getMiddleTypeOptions() {
      queryProjectType({
        // level: '2',
        parentId: '4'
      }).then((res) => {
        this.middleTypeOptions = res.data
      })
      // querySearchType({ topType: '4' }).then((res) => {
      //   this.middleTypeOptions = res.data
      // })
    },
    getBottomTypeOptions() {
      if (!this.basicForm.middleType) {
        return ''
      }
      queryProjectType({
        level: '3',
        parentType: this.basicForm.middleType
      }).then((res) => {
        this.bottomTypeOptions = res.data
      })
    },
    handleChangeMiddleType() {
      this.basicForm.bottomType = ''
      this.getBottomTypeOptions()
    },
    // 获取项目详情
    getDetailInfo() {
      this.loading = true
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          this.basicForm = res.data
          this.getBottomTypeOptions()
        }
        this.loading = false
      })
    },

    // 保存信息
    saveInfo() {
      this.$refs.basicFormRef.validate((res) => {
        if (res) {
          const formData = JSON.parse(
            JSON.stringify(this.basicForm)
          )

          addProjectInfo(formData).then((res) => {
            if (res.success) {
              this.$message.success('保存成功')
              this.$router.push({
                path: '/wisdomIndustry/IndustryInfoManagement/PrecisionApparatus/list',
                query: { refresh: Date.now() }
              })
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
</style>
